// import { useEffect, useState } from "react";
import { useEffect } from "react";
import ChatItem from "../ChatItem";
import './index.less'
import useChat from "@/store/chat";
type ChatMessage = {
  content: string
  role: string
  status?: 'loading' | 'success' | 'error'
}

type ChatItemListProps = {
  username: string
  chatList: ChatMessage[]
}

function ChatItemList(props: ChatItemListProps) {
  return props.chatList.map((item, index) => {
    return <ChatItem key={`${props.username}-${index}`} content={item.content} role={item.role} status={item.status} />
  })
}


function initChatList(): ChatMessage[] {
  return [
    {
      "content": "你是一个非常棒的助手",
      "role": "system"
    }
  ]
}

function Conversation() {
  const { messages, setMessages } = useChat()
  // const [chatList, setChatList] = useState<ChatMessage[]>([])
  useEffect(() => {
    // setChatList(initChatList())
    setMessages(initChatList())
  }, [])
  return (
    <div>
      <p>聊天记录</p>
      <p></p>
      <div className="chat-conversation-rect">
        {/* <ChatItemList username="中国" chatList={chatList} /> */}
        <ChatItemList username="中国" chatList={messages} />
      </div>
    </div>
  )
}
export default Conversation;
